<template>
  <a-spin :spinning="false">
    <div ref="priceEditor" class="price-editor">
      <div ref="tableHeader" class="row head" :class="{ 'show-reference': showReference, pinned: headerPinned }">
        <div class="fixed-col">
          <a-row :wrap="false">
            <a-col :span="18">
              <a-checkbox v-model:checked="showReference" @change="calculateOnePageCount">
                Display Reference Prices
              </a-checkbox>
            </a-col>
            <a-col :span="4">
              <e-icon
                type="Nextarrow"
                color="#a9b5c9"
                font-size="18px"
                hover-color="#3c6cfe"
                style="cursor: pointer"
                :disabled="page === 1"
                @click="handlePreviousPage" />
            </a-col>
            <a-col :span="2">
              <e-icon
                type="Lastarrow"
                color="#a9b5c9"
                font-size="18px"
                hover-color="#3c6cfe"
                style="cursor: pointer"
                :disabled="page >= Math.ceil(languagePairKeys.length / pageSize)"
                @click="handleNextPage" />
            </a-col>
          </a-row>
        </div>
        <div class="mobile-col">
          <div
            class="flex-box"
            :style="{
              transform: 'translateX(' + horizontalOffset + '%)'
            }">
            <div
              v-for="(languagePair, key) in groupByLanguagePair"
              :key="key"
              class="block"
              :class="[
                'width-' + (pageSize + (showReference ? 1 : 0)),
                {
                  active:
                    currentLanguagePair === key ||
                    ((currentLanguagePair === null ||
                      Object.keys(groupByLanguagePair).indexOf(currentLanguagePair) === -1) &&
                      key === Object.keys(groupByLanguagePair)[0])
                }
              ]">
              <a-space direction="vertical" :size="6">
                <div class="language-pair">
                  <div class="s-lang" :title="languagePair[0].sLangName">
                    {{ languagePair[0].sLangName }}
                  </div>
                  <a-tooltip
                    v-if="!readonly"
                    placement="right"
                    :get-popup-container="triggerNode => triggerNode.parentNode"
                    color="rgba(44, 57, 89, 0.8)"
                    title="Delete Language Pair">
                    <e-icon
                      type="delete"
                      color="#a9b5c9"
                      font-size="16px"
                      hover-color="#3c6cfe"
                      style="cursor: pointer"
                      @click="handleDeleteLanguagePair(languagePair[0])" />
                  </a-tooltip>
                </div>
                <div class="language-pair" :title="languagePair[0].tLangName">
                  <div class="t-lang">{{ languagePair[0].tLangName }}</div>
                  <a-tooltip
                    v-if="!readonly"
                    placement="right"
                    :get-popup-container="triggerNode => triggerNode.parentNode"
                    color="rgba(44, 57, 89, 0.8)"
                    title="Copy To Other Language Pair">
                    <e-icon
                      type="SaveCopetoALL"
                      color="#a9b5c9"
                      font-size="16px"
                      hover-color="#3c6cfe"
                      style="cursor: pointer"
                      @click="handleClickCopyToOther(languagePair[0])" />
                  </a-tooltip>
                </div>
              </a-space>
            </div>
          </div>
        </div>
      </div>
      <div ref="tableMain" class="row main" :class="{ 'show-reference': showReference, 'header-pinned': headerPinned }">
        <div class="fixed-col">
          <template v-for="serviceTypes in groupByServiceType" :key="serviceTypes[0].orderByID">
            <div class="head">{{ serviceTypes[0].serviceGroupName }}</div>
            <div
              v-for="(serviceType, index) in uniqBy(
                serviceTypes,
                item => item.serviceType + ':' + item.workloadUnit + ':' + item.fileKind + ':' + item.breakDown
              ).sort((type1, type2) => type1.orderID - type2.orderID)"
              :key="index"
              class="cell">
              <span class="service-name" :title="serviceType.serviceTypeName"> {{ serviceType.serviceTypeName }}</span>
              <a-tag>{{ serviceType.unitName }}</a-tag>
            </div>
          </template>
        </div>
        <div class="mobile-col">
          <div
            ref="flexBox"
            class="flex-box"
            :style="{
              transform: 'translateX(' + horizontalOffset + '%)'
            }">
            <div
              v-for="(serviceTypesLang, key) in groupByLanguagePair"
              :key="key"
              class="block"
              :class="[
                'width-' + (pageSize + (showReference ? 1 : 0)),
                {
                  active:
                    currentLanguagePair === key ||
                    ((currentLanguagePair === null ||
                      Object.keys(groupByLanguagePair).indexOf(currentLanguagePair) === -1) &&
                      key === Object.keys(groupByLanguagePair)[0])
                }
              ]">
              <div
                v-if="
                  languagePairKeys.indexOf(key) < page * pageSize &&
                  languagePairKeys.indexOf(key) >= (page - 1) * pageSize
                ">
                <template v-for="(serviceTypes, groupByKey) in groupByServiceType" :key="groupByKey">
                  <div class="head">
                    <div class="title">
                      Service Price ({{ serviceTypes[0].workloadUnit === -1 ? '%' : serviceTypes[0].currencyName }})
                    </div>
                    <div class="reference">
                      <div>Tier1{{ serviceTypes[0].workloadUnit === -1 ? '(%)' : '' }}</div>
                      <div>Tier2{{ serviceTypes[0].workloadUnit === -1 ? '(%)' : '' }}</div>
                      <div>GM(%)</div>
                      <div style="white-space: nowrap">Old Value</div>
                    </div>
                  </div>
                  <template
                    v-for="(serviceType, index) in uniqBy(
                      serviceTypes,
                      item => item.serviceType + ':' + item.workloadUnit + ':' + item.fileKind + ':' + item.breakDown
                    ).sort((type1, type2) => type1.orderID - type2.orderID)"
                    :key="index">
                    <div
                      v-if="
                        serviceTypesLang.find(
                          lang =>
                            lang.serviceType === serviceType.serviceType &&
                            lang.workloadUnit === serviceType.workloadUnit &&
                            lang.fileKind === serviceType.fileKind &&
                            lang.breakDown === serviceType.breakDown
                        )
                      ">
                      <template v-for="item in serviceTypesLang" :key="item.serviceTypeName">
                        <div
                          v-if="
                            item.serviceType === serviceType.serviceType &&
                            item.workloadUnit === serviceType.workloadUnit &&
                            item.fileKind === serviceType.fileKind &&
                            item.breakDown === serviceType.breakDown
                          "
                          class="cell">
                          <div class="input">
                            <span class="ant-input-affix-wrapper" :class="{ notice: isNeedNotice(item) && reviewing }">
                              <input
                                v-model="item.clientPrice"
                                :placeholder="item.serviceTypeName"
                                class="ant-input"
                                type="text"
                                :readonly="readonly"
                                @focus="handleCellFocus($event, item)"
                                @blur="handleCellBlur($event, item, item.workloadUnit)" />
                              <span v-if="item.workloadUnit === -1" class="ant-input-suffix"> % </span>
                            </span>
                          </div>
                          <div class="reference">
                            <div>{{ item.tier1 !== null ? item.tier1 : '--' }}</div>
                            <div>{{ item.tier2 !== null ? item.tier2 : '--' }}</div>
                            <div>{{ item.gm !== null ? item.gm : '--' }}</div>
                            <div>{{ item.oldValue !== null ? item.oldValue : '--' }}</div>
                          </div>
                        </div>
                      </template>
                    </div>
                    <div v-else class="cell none" />
                  </template>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="showReferenceTip && !showReference" ref="referenceTip" class="reference-tip">
        <div class="tip-col">
          <span class="field">Tier1{{ currentItem.workloadUnit === -1 ? '(%)' : '' }}</span>
          <span class="value">{{ currentItem.tier1 !== null ? currentItem.tier1 : '--' }}</span>
        </div>
        <div class="tip-col">
          <span class="field">Tier2{{ currentItem.workloadUnit === -1 ? '(%)' : '' }}</span>
          <span class="value">{{ currentItem.tier2 !== null ? currentItem.tier2 : '--' }}</span>
        </div>
        <div class="tip-col">
          <span class="field">GM(%)</span>
          <span class="value">{{ currentItem.gm !== null ? currentItem.gm : '--' }}</span>
        </div>
        <div class="tip-col">
          <span class="field">Old Value</span>
          <span class="value">{{ currentItem.oldValue !== null ? currentItem.oldValue : '--' }}</span>
        </div>
      </div>
    </div>
  </a-spin>
  <a-modal
    v-model:visible="showCopyToWindow"
    width="888px"
    title="Copy To Other Language Pair"
    wrap-class-name="primary-modal"
    ok-text="Copy"
    @cancel="showCopyToWindow = false"
    @ok="handleCopyToOther">
    <a-form layout="vertical">
      <a-form-item label="Language Pair" name="langPairID">
        <div style="display: flex">
          <a-select v-model:value="copyToLanguagePairs" mode="multiple" option-filter-prop="label">
            <a-select-option
              v-for="(item, key) in groupByLanguagePair"
              :key="key"
              :disabled="key === copyFromLanguagePair"
              :label="item[0].sLangName + '->' + item[0].tLangName">
              {{ item[0].sLangName }} -> {{ item[0].tLangName }}
            </a-select-option>
          </a-select>
          <a-button style="margin-left: 16px" type="primary" @click="handleCopySelectAll(copyFromLanguagePair)"
            >Select All</a-button
          >
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeMount, watch, inject, toRaw } from 'vue'
import EIcon from '@/components/EIcon.vue'
import { groupBy, uniqBy, cloneDeep } from 'lodash-es'
import { scrollEvent } from '@/hooks/useScrollEvent.js'
import { SURE_TO_DELETE } from '@/constants/message.js'
import 'ant-design-vue/es/input/style/index.css'
const { Modal, message } = inject('Feedback')
const props = defineProps({
  priceInfo: {
    type: Array,
    default() {
      return []
    }
  },
  pinHeight: {
    type: [Number, Boolean],
    default() {
      return false
    }
  },
  // 只读模式
  readonly: {
    type: Boolean,
    default: false
  },
  // 审核模式，不符合Tier规则的价格标红
  reviewing: {
    type: Boolean,
    default: false
  },
  // 选中的语言对
  selectedLanguagePair: {
    type: String,
    default: null
  }
})
const priceInfoCopy = ref(cloneDeep(toRaw(props.priceInfo)))
watch(
  () => props.priceInfo,
  () => {
    priceInfoCopy.value = cloneDeep(toRaw(props.priceInfo))
  },
  { deep: true }
)
// 容器DOM
const priceEditor = ref(null)
// 表头DOM
const tableHeader = ref(null)
// 主表DOM
const tableMain = ref(null)
// 参考价格提示窗DOM
const referenceTip = ref(null)
// 始终显示参考价格
const showReference = ref(false)
// 显示参考价格弹窗
const showReferenceTip = ref(false)
// 显示复制语言对窗口
const showCopyToWindow = ref(false)
// 复制原语言对
const copyFromLanguagePair = ref('')
// 复制目标语言对
const copyToLanguagePairs = ref([])
// 固定表头
const headerPinned = ref(false)
// 当前页
const page = ref(1)
// 一页显示多少语言对，取决于有多少语言对，是否显示参考价格，页面可用宽度
const pageSize = ref(1)
// 将数据按照ServiceType分组，每个ServiceType的orderByID不同
const groupByServiceType = computed(() => groupBy(priceInfoCopy.value, item => item.orderByID))
// 按照语言对分组，key的形式为[原语言id-目标语言id]， 如7-11
const groupByLanguagePair = computed(() => groupBy(priceInfoCopy.value, item => item.sLang + '-' + item.tLang))
// 语言对分组后的key
const languagePairKeys = computed(() => Object.keys(groupByLanguagePair.value))
// 当前的选中的语言对
const currentLanguagePair = ref(props.selectedLanguagePair)
// 当前选中的单元格数据
const currentItem = ref({})
// 每次平移的百分比（如果不显示参考价格时只需平移百分百，而显示参考价格时应该平移pageSize/(pageSize + 1)）, 因为参考价格占用了两列的宽度
const horizontalOffset = computed(
  () => (pageSize.value / (pageSize.value + (showReference.value ? 1 : 0))) * (page.value - 1) * -100
)
// 下一页语言对
const handlePreviousPage = () => {
  if (page.value > 1) {
    page.value--
    currentLanguagePair.value = languagePairKeys.value[(page.value - 1) * pageSize.value]
  }
}
// 上一页语言对
const handleNextPage = () => {
  if (page.value < Math.ceil(languagePairKeys.value.length / pageSize.value)) {
    page.value++
    currentLanguagePair.value = languagePairKeys.value[(page.value - 1) * pageSize.value]
  }
}
// focus时激活语言对，显示参考价格小窗
const handleCellFocus = (event, item) => {
  currentLanguagePair.value = item.sLang + '-' + item.tLang
  currentItem.value = item
  // 显示参考价格小窗
  showReferenceTip.value = true
  const containerRect = priceEditor.value.getBoundingClientRect()
  const { left, top } = event.target.getBoundingClientRect()
  referenceTip.value.style.left = left - 10 - containerRect.left + 'px'
  referenceTip.value.style.top = top - 5 - containerRect.top - 60 + 'px'
}
// blur时隐藏参考价格小窗
const handleCellBlur = (event, item, unit) => {
  showReferenceTip.value = false
  if (item.clientPrice) {
    let format = parseFloat(item.clientPrice.toString().replace(/[^\d^.]+/g, ''))
    // unit < 0 代表是百分数
    if (!Number.isNaN(format) && unit === -1) {
      if (format < 1 && format !== 0) {
        format = 1
      }
      if (format > 100) {
        format = 100
      }
    }
    item.clientPrice = Number.isNaN(format) ? '' : (Math.floor(format * 1000) / 1000).toString()
  }
}
// 删除语言对
const emits = defineEmits(['delete-language-pair'])
const handleDeleteLanguagePair = languagePair => {
  if (Object.keys(groupByLanguagePair.value).length === 1) {
    // 最后一个语言对不能删除
    message.warning('At least one language pair is required !')
  } else {
    Modal.confirm({
      content: SURE_TO_DELETE,
      okButtonProps: { danger: true },
      okText: 'Confirm',
      onOk: () => {
        emits('delete-language-pair', languagePair.sLang, languagePair.tLang)
      }
    })
  }
}
// 点击复制到别的语言对
const handleClickCopyToOther = languagePair => {
  showCopyToWindow.value = true
  copyFromLanguagePair.value = languagePair.sLang + '-' + languagePair.tLang
  copyToLanguagePairs.value = []
}
// 复制到别的语言对
const handleCopyToOther = () => {
  const from = groupByLanguagePair.value[copyFromLanguagePair.value]
  if (
    from.filter(price => price.serviceGroup !== 6).every(price => !price.clientPrice && price.clientPrice !== 0) &&
    from.filter(price => price.serviceGroup === 6).some(price => !price.clientPrice && price.clientPrice !== 0)
  ) {
    message.error('There is no price info to use.')
    return
  }
  copyToLanguagePairs.value.forEach(key => {
    groupByLanguagePair.value[key].forEach(price => {
      const foundFrom = from.find(
        item =>
          item.serviceType === price.serviceType &&
          item.fileKind === price.fileKind &&
          item.workloadUnit === price.workloadUnit &&
          item.breakDown === price.breakDown
      )
      price.clientPrice = foundFrom.clientPrice
    })
  })
  showCopyToWindow.value = false
}
// 挂在时计算pageSize，并监听窗口大小调整
onMounted(() => {
  calculateOnePageCount()
  window.addEventListener('resize', calculateOnePageCount)
})
// 取消监听窗口大小
onBeforeMount(() => {
  window.removeEventListener('resize', calculateOnePageCount)
})
// 计算当前宽度一页可以容纳多少语言对
const calculateOnePageCount = () => {
  if (tableMain.value.clientWidth === 0) {
    setTimeout(() => calculateOnePageCount(), 500)
    return
  }
  // 语言对总数，如果始终显示参考价格，相当于多占用一个语言对
  const languagePairCount = languagePairKeys.value.length
  // 当前宽度可容纳数
  const maxCountInCurrentWidth = Math.floor((tableMain.value.clientWidth - 328) / 240) - (showReference.value ? 1 : 0)
  // 取小值，最多显示10个语言对
  pageSize.value = Math.min(Math.min(languagePairCount, maxCountInCurrentWidth), 10)
  if (currentLanguagePair.value === null) {
    page.value = 1
  } else {
    page.value = Math.ceil((languagePairKeys.value.indexOf(currentLanguagePair.value) + 1) / pageSize.value)
    if (page.value === 0) page.value = 1
  }
  if (Number.isInteger(props.pinHeight)) {
    pinHeader()
  }
}
// 计算价格是否符合Tier规则-如果有Iter2,大于Tier2符合，否则如果有Tier1，大于Tier1符合，都没有直接判定为不符合
const isNeedNotice = item => {
  if (item.clientPrice || item.clientPrice === 0) {
    if (item.tier2 !== null) {
      return parseFloat(item.clientPrice) < item.tier2
    }
    if (item.tier1 !== null) {
      return parseFloat(item.clientPrice) < item.tier1
    }
    return true
  } else {
    return false
  }
}
// 根据滚动位置固定表头
const pinHeader = () => {
  if (tableMain.value) {
    const rect = tableMain.value.getBoundingClientRect()
    if (rect.height > 0 && rect.width > 0) {
      if (rect.top <= 60 + props.pinHeight) {
        headerPinned.value = true
        tableHeader.value.style.top = props.pinHeight + 'px'
        tableHeader.value.style.width = rect.width + 'px'
      } else {
        headerPinned.value = false
        tableHeader.value.style.top = 0
        tableHeader.value.style.width = '100%'
      }
    }
  }
}
// 复制时候选中全部语言对
const handleCopySelectAll = copyFromLanguagePair => {
  Object.keys(groupByLanguagePair.value).forEach(key => {
    if (key !== copyFromLanguagePair) {
      copyToLanguagePairs.value.push(key)
    }
  })
}
// 监听容器滚动
watch(
  () => scrollEvent.value,
  dom => {
    if (Number.isInteger(props.pinHeight)) {
      const element = dom.target
      if (element.getAttribute('id') === 'client-layout-uniq-001') {
        pinHeader()
      }
      if (element.getAttribute('id') === 'quota-container-uniq-002') {
        pinHeader()
      }
    }
  }
)
// 监听语言对变化
watch(
  () => languagePairKeys.value,
  () => {
    calculateOnePageCount()
  }
)
defineExpose({ priceInfoCopy })
</script>

<style lang="less" scoped>
.price-editor {
  position: relative;
  padding: 60px 0 0 0;
}
@border: 1px solid #e1e6f0;
.row {
  width: 100%;
  display: flex;
  border: @border;
  color: @black-85p;
  .fixed-col {
    width: 328px;
    flex: 0 0 328px;
    white-space: nowrap;
    .head {
      height: 40px;
      background-color: #f6f6fb;
      border-right: @border;
      line-height: 40px;
      padding: 0 12px;
      font-weight: bold;
      color: @text-gray;
    }
    .cell {
      border-top: @border;
      border-right: @border;
      height: 50px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .service-name {
        display: inline-block;
        max-width: 258px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .ant-tag {
        color: #7ca4ce;
        background-color: #f0f4ff;
        border: none;
      }
    }
  }
  .mobile-col {
    width: calc(100% - 328px);
    flex: 0 0 calc(100% - 328px);
    overflow-x: hidden;
    .flex-box {
      flex: 0 0 100%;
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%;
      transform: translateX(0%);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      transition: all 0.2s;
      .block {
        transition: flex 0.1s;
        &.width-10 {
          flex: 0 0 calc(10%);
        }
        &.width-9 {
          flex: 0 0 calc(11.11%);
        }
        &.width-8 {
          flex: 0 0 calc(12.5%);
        }
        &.width-7 {
          flex: 0 0 calc(14.28%);
        }
        &.width-6 {
          flex: 0 0 calc(16.66%);
        }
        &.width-5 {
          flex: 0 0 calc(20%);
        }
        &.width-4 {
          flex: 0 0 calc(25%);
        }
        &.width-3 {
          flex: 0 0 calc(33.3%);
        }
        &.width-2 {
          flex: 0 0 calc(50%);
        }
        &.width-1 {
          flex: 0 0 calc(100%);
        }
        &.active {
          background-color: #fafafc;
        }
        .head {
          height: 40px;
          background-color: #f6f6fb;
          border-right: @border;
          line-height: 40px;
          padding: 0 12px;
          color: #818d9f;
          .reference {
            display: none;
          }
        }
        .cell {
          border-top: @border;
          border-right: @border;
          height: 50px;
          padding: 10px;
          display: flex;
          align-items: center;
          position: relative;
          .input {
            flex: 0 0 100%;
            .ant-input-affix-wrapper.notice {
              border-color: #fc4b3b !important;
            }
          }
          .reference {
            display: none;
          }
        }
      }
    }
  }
}
.row.head {
  height: 56px;
  box-shadow: 0 4px 8px rgba(157, 163, 201, 0.5);
  border: none;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: @white;
  margin-bottom: 4px;
  &.pinned {
    position: fixed;
  }
  .fixed-col {
    line-height: 56px;
    padding: 0 12px;
    position: relative;
    color: @text-gray;
    .ant-checkbox-wrapper {
      color: @text-gray;
      user-select: none;
    }
    &:after {
      content: ' ';
      width: 1px;
      height: 16px;
      background-color: @lighter-gray;
      position: absolute;
      top: calc(50% - 8px);
      right: 0;
    }
  }
  .flex-box {
    .block {
      display: flex;
      flex-direction: column;
      padding: 0 8px;
      font-weight: bold;
      position: relative;
      .cube {
        text-align: center;
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 18px;
        margin-right: 8px;
        border-radius: 2px;
        color: rgba(129, 141, 159, 1);
        font-weight: normal;
      }
      .language-pair {
        padding: 0 4px 0 0;
        display: flex;
        justify-content: space-between;
        .s-lang,
        .t-lang {
          font-size: 12px;
          line-height: 16px;
          width: 0;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .s-lang:before {
          content: 'S';
          background-color: rgba(240, 244, 255, 1);
          .cube();
        }
        .t-lang:before {
          content: 'T';
          background-color: rgba(246, 240, 255, 1);
          .cube();
        }
      }
      &:after {
        content: ' ';
        width: 1px;
        height: 16px;
        background-color: @lighter-gray;
        position: absolute;
        top: calc(50% - 8px);
        right: 0;
      }
      &.active {
        background-color: @white;
        .s-lang,
        .t-lang {
          color: @primary-color;
        }
      }
    }
  }
}
.row.show-reference {
  .block {
    &.active {
      &.width-10 {
        flex: 0 0 calc(20%);
      }
      &.width-9 {
        flex: 0 0 calc(22.22%);
      }
      &.width-8 {
        flex: 0 0 calc(25%);
      }
      &.width-7 {
        flex: 0 0 calc(28.57%);
      }
      &.width-6 {
        flex: 0 0 calc(33.33%);
      }
      &.width-5 {
        flex: 0 0 calc(40%);
      }
      &.width-4 {
        flex: 0 0 calc(50%);
      }
      &.width-3 {
        flex: 0 0 calc(66.6%);
      }
      &.width-2 {
        flex: 0 0 calc(100%);
      }
      &.width-1 {
        flex: 0 0 calc(100%);
      }
      .head {
        display: flex;
        justify-content: space-between;
        .title {
          flex: 0 0 50%;
        }
        .reference {
          flex: 0 0 50%;
          display: flex;
          justify-content: space-between;
          div {
            flex: 0 0 25%;
            text-align: center;
          }
        }
      }
      .cell {
        .input {
          flex: 0 0 50%;
        }
        .reference {
          display: flex;
          flex: 0 0 50%;
          justify-content: space-between;
          div {
            flex: 0 0 25%;
            text-align: center;
          }
        }
      }
    }
  }
}
.reference-tip {
  position: absolute;
  width: 266px;
  height: 56px;
  background-color: rgba(44, 57, 89, 0.8);
  border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(33, 45, 117, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 16px;
  .tip-col {
    display: flex;
    flex-direction: column;
    text-align: center;
    .field {
      color: #9ec0ef;
    }
    .value {
      color: @white;
    }
  }
}
</style>
